import {
  Breadcrumb,
  Card,
  Form,
  Input,
  Radio,
  Select,
  Upload,
  Space,
  Button,
  message,
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { Link, useHistory, useParams } from 'react-router-dom';

// 富文本编辑器
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

import styles from './Publish.module.scss';
import { Channel } from '@/components/Channel/Channel';
import { useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import { publishArticle } from '@/store/actions/article';
import { http } from '@/utils';

export const Publish = () => {
  // hooks
  const dispatch = useDispatch();
  const history = useHistory();
  const params = useParams();
  // console.log(params);

  // 已上传文件列表
  const [fileList, setFileList] = useState([]);
  // 上传图片备份
  const [fileListStore, setFileListStore] = useState([]);
  // 上传图片备份方式2
  const fileListRef = useRef([]);
  // 用户点击按钮状态
  const [publishType, setPublishType] = useState('publish');
  // 获取 form 表单实例
  const [form] = Form.useForm();
  // 图片上传数量
  const [maxCount, setMaxCount] = useState(1);

  useEffect(() => {
    if (params.id) {
      const fetchData = async () => {
        // 请求文章详情
        const res = await http.get(`/mp/articles/${params.id}`);
        console.log('文章详情 res', res);
        // 数据回显
        form.setFieldsValue({
          title: res.data.data.title,
          content: res.data.data.content ? res.data.data.content : '',
          channelId: res.data.data.channel_id,
          type: res.data.data.cover.type,
        });
        // 图片回显
        // setFileList([
        //   { url: 'http://geek.itheima.net/uploads/1648456192864.jpg' },
        //   { url: 'http://geek.itheima.net/uploads/1648456192864.jpg' },
        // ]);
        setFileList(res.data.data.cover.images.map((item) => ({ url: item })));
      };
      fetchData();
    }
  }, [params.id, form]);

  // 文件上传事件处理函数
  const handleUpload = (file) => {
    console.log('file', file);
    // 图片上传组件显示用
    setFileList(file.fileList);
    // 图片上传组件切换图片数量时，读取用
    setFileListStore(file.fileList);
    // 图片上传组件切换图片数量时，读取用
    fileListRef.current = file.fileList;
  };
  // 图片上传数量设置
  const handleMaxCount = (e) => {
    console.log(typeof e.target.value);
    console.log(e.target.value);
    // 设置图片上传数量
    setMaxCount(e.target.value);

    // 判断显示图片上传数量
    // if (e.target.value === 1 && fileListStore.length > 0) {
    //   // 设置图片显示
    //   setFileList([fileListStore[0]]);
    // } else {
    //   setFileList([...fileListStore]);
    // }

    // 判断显示图片上传数量 使用 ref中的数据
    if (e.target.value === 1 && fileListRef.current.length > 0) {
      // 设置图片显示
      setFileList([fileListRef.current[0]]);
    } else {
      setFileList([...fileListRef.current]);
    }
    // 为了图片上传数量和类型一致做判断用
    if (e.target.value === 0) {
      setFileList([]);
    }
  };
  // 表单数据收集
  const onFinish = (values) => {
    console.log('发表文章数据1', values);
    console.log('发表文章数据2', fileList);
    console.log('发表按钮', publishType);
    // 判断图片数量和类型选择要一直
    if (values.type !== fileList.length) {
      return message.warning('封面数量与所选类型不匹配');
    }

    // 把数据交给 action 做数据拼装，发送给服务器。
    dispatch(
      publishArticle({ values, fileList, publishType, articleId: params.id })
    );

    // 发布完成，跳转到文章列表
    history.push('/home/article');
  };
  // 发表为草稿
  const saveDraft = async () => {
    // 表单验证，通过 form 实例上方法出发
    try {
      const values = await form.validateFields();
      console.log('校验成功', values);

      // 判断图片数量和类型选择要一直
      if (values.type !== fileList.length) {
        return message.warning('封面数量与所选类型不匹配');
      }
      // 把数据交给 action 做数据拼装，发送给服务器。
      dispatch(publishArticle({ values, fileList, publishType: 'draft' }));

      // 发布完成，跳转到文章列表
      history.push('/home/article');
    } catch (error) {
      console.log('校验失败', error);
    }
  };

  return (
    <div className={styles.root}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to={'/home'}>首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              {params.id ? '修改文章' : '发布文章'}
            </Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        {/* 表单 */}
        <Form
          form={form}
          initialValues={{ type: 1, content: '' }}
          onFinish={onFinish}
          labelCol={{ span: 2 }}
        >
          {/* 文章标题 */}
          <Form.Item
            name={'title'}
            label={'标题'}
            rules={[{ required: true, message: '请输入文章标题' }]}
          >
            <Input
              placeholder={'请输入文章标题'}
              style={{ width: '400px' }}
            ></Input>
          </Form.Item>
          {/* 频道 */}
          <Form.Item
            label={'频道'}
            name="channelId"
            rules={[{ required: true, message: '请选择文章频道' }]}
          >
            <Channel width={400} />

            {/* <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              <Select.Option value={'html'}>html</Select.Option>
              <Select.Option value={'js'}>js</Select.Option>
            </Select> */}
          </Form.Item>
          {/* 封面 */}
          <Form.Item label={'封面'}>
            <Form.Item name={'type'}>
              <Radio.Group onChange={handleMaxCount}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>

            {maxCount > 0 && (
              <Upload
                name="image" // api 定的
                action={'http://geek.itheima.net/v1_0/upload'} // api 定的
                fileList={fileList}
                onChange={handleUpload}
                listType={'picture-card'}
                maxCount={maxCount}
              >
                <PlusOutlined />
              </Upload>
            )}
          </Form.Item>

          {/* 富文本 */}
          <Form.Item
            label={'内容'}
            name={'content'}
            rules={[{ required: true, message: '请输入文章内容' }]}
            style={{ width: 800 }}
          >
            <ReactQuill
              className="publish-quill"
              theme="snow"
              placeholder="请输入文章内容"
            />
          </Form.Item>
          {/* 按钮 */}
          <Form.Item wrapperCol={{ offset: 2 }}>
            <Space>
              <Button
                type="primary"
                size="large"
                htmlType="submit"
                onClick={() => setPublishType('publish')}
              >
                {params.id ? '修改文章' : '发布文章'}
              </Button>
              {/* <Button
                size="large"
                htmlType="submit"
                onClick={() => setPublishType('draft')}
              >
                存入草稿
              </Button> */}
              <Button size="large" onClick={saveDraft}>
                存入草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
